
// const randomUniqueString = () => {
//   const unique = (((1 + Math.random()) * 0x100000000000) | 0).toString(16)
//   return unique
// }

interface Options {
  id: string,
  stamp: string,
  width?: number,
  height?: number,
  rotate?: number,
  font?: string,
  fillStyle?: string,
  textAlign?: alignStr,
  textBaseline?: string
}
enum alignStr {
  left = 'left',
  center = 'center',
  right = 'right'
}

enum vertical {
  top = 'top',
  middle = 'middle',
  bottom = 'bottom'
}

class Watermark {
  private status:boolean = true
  private options = {
    id: '',
    stamp:'',
    width: 250,
    height: 120,
    rotate: 20,
    font: '15px Vedana',
    fillStyle: 'rgba(0,0,0,0.2)',
    textAlign: alignStr['left'],
    textBaseline: vertical['middle']
  }

  init() {
    this.check()
    this.setView()
  }
  check() {
    const { id } = this.options
    if (id && document.getElementById(id) !== null) {
      const dom = document.getElementById(id) as HTMLDivElement
      document.body.removeChild(dom)
    }
  }
  drawImage() {
    const {
      stamp, width, height, rotate, font, fillStyle, textAlign, textBaseline
    } = this.options

    let canvas = document.createElement('canvas')
    canvas.width = width
    canvas.height = height

    let ctx = canvas.getContext('2d') as CanvasRenderingContext2D
    ctx.rotate(-(rotate) * Math.PI / 180)
    ctx.font = font
    ctx.fillStyle = fillStyle
    ctx.textAlign = textAlign
    ctx.textBaseline = textBaseline
    ctx.fillText(stamp, width / rotate, height)
    const image = canvas.toDataURL('image/png')
    return image
  }
  setView() {
    const { id } = this.options
    const dataURL = this.drawImage()
    let div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '3px'
    div.style.left = '0px'
    div.style.position = 'fixed'
    div.style.zIndex = '100000'
    div.style.width = `${document.documentElement.clientWidth}px`
    div.style.height = `${document.documentElement.clientHeight}px`
    div.style.background = `url('${dataURL}') left top repeat`
    document.body.appendChild(div)
  }

  constructor(opt: Options) {
    this.options = Object.assign(this.options,opt)
    this.init()
  }
}

export default Watermark;